<template>
    <div>

        <van-nav-bar
                title="我的收藏"
                left-text="返回"
                left-arrow
                @click-left="onClickLeft"

        />
        <van-loading color="red"  v-if="loading" class="pos"/>

<!--        <div class="actir">-->
<!--            <p v-for="(item) in collect" :key="item.articleId"><span style="color: red;margin-right: 5px" >*</span>{{item.title}}</p>-->
<!--        </div>-->
                <div class="mylist" v-for="(item,index) in newslist" :key="index" style="display:flex" @click="selectNews(item.articleId)">
                    <div class="newsleft">
                        <img :src="item.bannerImgUrl" alt="">
                    </div>
                    <div class="newsright" >
                        <div style="overflow: hidden">
                            <span class="pull-left">{{item.articleSource}}</span>
<!--                            <span class="pull-right" @click="selectNews(item.articleId)">了解更多></span>-->
                        </div>
                        <div v-html="item.title" style="margin-top:10px;text-align:left;"></div>
                        <div v-html="item.createTime" style="position: absolute;bottom:6px"></div>
                    </div>
                </div>


    </div>
</template>

<script>
    import {coll} from "../api/api";

    export default {
        name: "Collection",
        data(){
            return{
                newslist:[],
                loading: true,
                finished: false,
                refreshing: false,
                num:1,
                id:"",

            }
        },

        methods:{
            onClickLeft() {
                this.$router.push({path:'/myapp/user',query:{active:3}})
            },
            selectNews(articleId){
                this.$router.push({path:'/collestNewsInfo',query:{id:articleId}})
            }



        },

        created() {
            coll().then(res=>{
                console.log(res.rows)
                this.newslist=res.rows;
                this.loading= false
            })




        }
    }
</script>

<style scoped>
/*    .actir{*/
/*        padding: 10px;*/
/*    }*/
/*.actir>p{*/
/*    margin-top: 10px;*/
/*    white-space: nowrap;*/
/*    overflow: hidden;*/
/*    text-overflow: ellipsis;*/
/*}*/
/*    .actir>p:hover{*/
/*        cursor: pointer;*/
/*        color: #5d5de0;*/
/*    }*/

.pos{
    position: absolute;
    top:48%;
    left:48%;
}


.mylist{
    display: flex;
}
.mylist>div{
    box-sizing: border-box;
}
.newsleft{
    width:45%;
    padding:5px;
}
.newsleft>img{
    width:100%;
    height:110px;
    min-height: 110px;

}
.newsright{
    position: relative;
    width:55%;
    padding:5px;
    font-size:14px;
}
.pull-left{
    float:left;
    color:red;
}
.pull-right{
    float:right;
    color: #ccc;
}
</style>